import { useState } from 'react';
import { Drawer, Button, Form, Input, Select, DatePicker, Message } from '@arco-design/web-react';
import { fetchModuleAdd, fetchModuleList } from '../../../../../api/common'
import { regExpConfig } from '../../../../../configs/regular.config'
const formItemLayout = {
  wrapperCol: {
    span: 24,
  },
};
let keyIterater = 1234
function ModuleAdd({state, setState}) {
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);

  init()
  function init(){
    form.setFieldValue({
      ...state.moduleAdd.data
    })
  }


  // 新增模块
  function moduleAdd(subMenu, cb){
    fetchModuleAdd({subMenu: subMenu},
      (resp)=>{
        Message.success('添加成功')
        form.resetFields()
        cb()
      },
      (resp)=>{
        Message.error('添加失败')
        cb()
      }
    )
  }

  //刷新Lisst
  function getTableList(pid, data){
    setState(state=>{
      return{
        ...state,
        moduleList: {
            ...state.moduleList,
            loading: true
        }
    }
    })
    // fetchModuleList({},
    //     (resp)=>{
    //         setState(state=>{
    //           return{
    //             ...state,
    //             moduleList: {
    //                 ...state.moduleList,
    //                 loading: false,
    //                 data: resp.data.list
    //             },
    //             moduleAdd: {
    //               ...state.moduleAdd,
    //               visible: false,
    //               data: {}
    //             },
    //         }
    //         })
    //     },
    //     ()=>{
    //     }
    // ) 
    //内存刷新
    function funForAdd(list){
      list.map(module=>{
        if (module.id == pid){
          if (!module.children){
            module.children = [] 
          }
          module.children.push({...data, status: true,hidden: 0,top: false,key: keyIterater, id: keyIterater, children: []})
          keyIterater++
          return
        }
        if (module.children && module.children.length > 0){
          funForAdd(module.children)
        }
      })
    }

    let tmp = [...state.moduleList.data]
    funForAdd(tmp)
    setState(state=>{
      return{
        ...state,
        moduleList: {
            ...state.moduleList,
            loading: false,
            data: tmp
        },
        moduleAdd: {
          ...state.moduleAdd,
          visible: false,
          data: {}
        },
    }
    })

  }

  return (
    <div>
      <Drawer
        width={614}
        title={<span>新增子菜单 </span>}
        visible={state.moduleAdd.visible}
        confirmLoading={confirmLoading}
        onOk={() => {
          form.validate().then((res) => {
            res.parentId = state.moduleAdd.data.id
            setConfirmLoading(true);
            moduleAdd(res, ()=>{
              setConfirmLoading(false)
              getTableList(res.pId, res)
            })
          }).catch(error=>{
            Message.error('格式错误')
          });
        }}
        onCancel={() => {
          setState(state=>{
            return{
              ...state,
              moduleAdd: {
                ...state.moduleAdd,
                visible: !state.moduleAdd.visible
              }
            }
          })
          form.resetFields()
        }}
      >
        <Form {...formItemLayout} form={form} layout='vertical'>
          <Form.Item label='上级菜单id' field='pId' initialValue={state.moduleAdd.data ? state.moduleAdd.data.id : null}>
            <Input disabled/>
          </Form.Item>
          <Form.Item label='新增菜单' required field='resName' 
              rules={[
                { required: true, minLength: 3, maxLength: 10, message: '菜单名为3-10个字符', }]}>
            <Input placeholder='请输入菜单名称' />
          </Form.Item>
          <Form.Item label='排序数字' field='sort' 
              rules={[
                { required: true },
                {required: true, minLength: 1, message: '排序长度不小于1',},
                { match: regExpConfig.isInt, message: '必须是数字' }]}>
          <Input placeholder='请输入排序数字' />
          </Form.Item>
          <Form.Item label='模块名称' field='resModule' 
              rules={[
                { required: true },
                {required: true, minLength: 3, maxLength: 10, message: '模块名为3-10个字符',}
                ]}>
          <Input placeholder='请输入模块名称' />
          </Form.Item>
          <Form.Item label='关键字' field='resKey' 
            rules={[
              { required: true, minLength: 3, maxLength: 10, message: '关键字应该为3-10个字符',},
              { match: regExpConfig.isNotChina, message: '必须为非中文字符' }
              ]}>
          <Input placeholder='请输入关键字' />
          </Form.Item>
          <Form.Item label='图标名称' field='resIcon' 
            rules={[
              { required: true, minLength: 1, maxLength: 10, message: '菜单名为3-10个字符', },
              { match: regExpConfig.isNotChina, message: '必须为非中文字符' }
              ]}>
          <Input placeholder='请输入图标名称' />
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}

export default ModuleAdd